import React, { useState } from 'react'
import '@nutui/nutui-react/dist/style.css'
import { NavBar } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import { Picker, Cell } from '@nutui/nutui-react'
import { Input, TextArea, Uploader,Button } from '@nutui/nutui-react'


export default function Feedback() {
    const [isVisible, setIsVisible] = useState(false)
    const [baseDesc, setBaseDesc] = useState('')
    const [val, setVal] = useState([])
    const options = [
        [
            { value: 1, text: '商品相关' },
            { value: 2, text: '产品建议' },
            { value: 3, text: '举报' },
            { value: 4, text: '优惠活动' },
            { value: 5, text: '功能异常' },
            { value: 8, text: '其它' },
        ],
    ]
    const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
    const confirmPicker = (options, values) => {
        let description = ''
        options.forEach((option) => {
            description += ` ${option.text}`
        })
        setBaseDesc(description)
    }
    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => window.history.back()}
            >
                意见反馈
            </NavBar>
            <Cell
                title="反馈类型"
                description={baseDesc}
                onClick={() => setIsVisible(!isVisible)}
            />
            <Picker
                title="请选择城市"
                visible={isVisible}
                value={val}
                options={options}
                onConfirm={(list, values) => {
                    confirmPicker(list, values)
                    setVal(values)
                }}
                onClose={() => {
                    setIsVisible(false)
                }}
            />
            <Cell
                title="手机号码"
            >
                <span style={{ marginTop: "12px" }}>手机号码</span><Input
                    className="nut-input-text"
                    placeholder="请输入手机号码,方便我们与您联系"
                    type="text"
                    onChange={(val) => {
                        console.log('change value:', val)
                    }}
                />
            </Cell>
            <Cell style={{ width: "100%", height: "200px" }} >
                <TextArea placeholder='请填写您的意见'></TextArea>
            </Cell>
            <Cell
                title=""
            >
                <div>
                    <span>上传图片(最多上传3张)</span><br></br><Uploader url={uploadUrl} multiple maxCount="3" />
                </div>
            </Cell>
            <Cell style={{ position: "fixed", bottom: "38px" }}>
                <Button style={{width:"100%",height:"40px"}} type="primary" shape="square">
                    提交
                </Button>
            </Cell>
        </div>
    )
}
